<template>
  <div class="home">
    <home-header></home-header>
    <div class="scroll-wrap" ref="scrollwrap">
      <div class="inner-wrap">
        <home-swiper></home-swiper>
        <home-channel-nav></home-channel-nav>
        <home-exhibition></home-exhibition>
        <home-choice></home-choice>
      </div>
    </div>
    <home-footer></home-footer>
  </div>
</template>
<script>
import Bscroll from 'better-scroll'
import HomeHeader from '../../components/home/Homeheader.vue'
import HomeSwiper from '../../components/home/Homeswiper'
import HomeChannelNav from '../../components/home/Channelnav'
import HomeExhibition from '../../components/home/Exhibition'
import HomeChoice from '../../components/home/Homechilce'
import HomeFooter from '../../components/home/Homefooter'
export default {
  metaInfo: {
    title: '小米商城-小米官方网站，小米手机、红米手机正品专卖',
    meta: [{
      name: 'keywords',
      content: '小米,小米9,小米cc9,Redmi K20,Redmi Note 8,小米MIX3,小米商城'
    }]
  },
  components: {
    HomeHeader,
    HomeSwiper,
    HomeChannelNav,
    HomeExhibition,
    HomeChoice,
    HomeFooter
  },
  mounted () {
    /* eslint-disable no-new */
    new Bscroll(this.$refs.scrollwrap, {
      mouseWheel: true
    })
  }
}
</script>
<style lang="scss" scoped>
@import "../../assets/css/mixin.scss";
.home {
  padding-top: px2rem(142 / 2);
  .scroll-wrap {
    height: 100%;
    left: 0;
    bottom:20rem;
    right: 0;
    top: px2rem(142 / 2);
    position: absolute;
    z-index: 1;
    .inner-wrap {
      padding-bottom: px2rem(200 / 2);
    }
  }
}
</style>
